import React, { useState } from 'react'
import { LoadingOutlined, PlusOutlined,ExclamationCircleOutlined  } from '@ant-design/icons';
import { Modal, Button, Form, Input, Radio, Upload, DatePicker, Space, Select, } from 'antd';
import { url } from "../../../services/index"
import { insert } from "../../../services/user"
const { Option } = Select;

export default function (props) {
    const [imageUrl, setImageUrl] = useState();
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();
    const [date, setDate] = useState("")
    //点击确认后预览图片
    const handleChange = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            console.log(info.file.response.filename);
            setLoading(false);
            setImageUrl(info.file.response.filename);
        }
    }
    //日期
    const onChange = (date, dateString) => {
        setDate(dateString)
        console.log(date, dateString);
    };
    //弹出框
    const [isModalOpen, setIsModalOpen] = useState(false);
    

    const handleOk = async () => {
        if (form.getFieldsValue().couponsNum<0) {
            Modal.confirm({
                title: '提示',
                icon: <ExclamationCircleOutlined />,
                content: '优惠券数量不能为负',
                okText: '确认',
                cancelText: '取消',
            });
        }else{
            setIsModalOpen(false);
            await insert({...form.getFieldsValue(),coupons:[{neme:form.getFieldsValue().couponsName,num:form.getFieldsValue().couponsNum}], birth: date, headImg: imageUrl })
            props.show()
            form.resetFields()
        }
       
    };
    const handleCancel = () => {
        setIsModalOpen(false);
        form.resetFields()
    };
    const add = () => {
        setIsModalOpen(true);
    }




    return <div>
        <Button type="primary" onClick={add}>新增</Button>
        <div>
            <Modal title="增加用户信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{
                        span: 6,
                    }}
                    wrapperCol={{
                        span: 10,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="昵称"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请填写昵称',
                            },
                        ]}

                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请填写用户名',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="pwd"
                        rules={[
                            {
                                required: true,
                                message: '请填写密码',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="性别"
                        name="gender"
                    >
                        <Radio.Group >
                            <Radio value={"男"}>男</Radio>
                            <Radio value={"女"}>女</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item
                        label="生日信息"
                        name="birth"
                    >
                        <Space direction="vertical">
                            <DatePicker onChange={onChange} />
                        </Space>
                    </Form.Item>

                    <Form.Item
                        label="联系电话"
                        name="phone"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="会员积分"
                        name="integral"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="优惠券名称"
                        name="couponsName"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="优惠券数量"
                        name="couponsNum"
                    >
                        <Input type='number' style={{ width: "100px" }} />
                    </Form.Item>

                    <Form.Item
                        label="收货地址"
                        name="address"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="头像"
                        name="headImg"
                    >
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action={url + "/users/upload"}
                            // beforeUpload={beforeUpload}
                            onChange={handleChange}
                        >
                            {imageUrl ? (
                                <img
                                    src={"http://localhost:3000/images/" + imageUrl}
                                    alt="file"
                                    style={{
                                        width: '100%',
                                    }}
                                />
                            ) : (
                                <div>
                                    {loading ? <LoadingOutlined /> : <PlusOutlined />}
                                    <div style={{ marginTop: 8 }}>Upload</div>
                                </div>
                            )}
                        </Upload>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    </div>
}
